@using AntDesign.Charts
@using Title = AntDesign.Charts.Title

    <Tabs>
        <TabPane Key="1">
            <TabTemplate>示例1</TabTemplate>
            <ChildContent>
            <DualAxes Data="@(new[] {uvBillData, transformData})" Config="config1" />
            </ChildContent>
        </TabPane>
        <TabPane Key="2">
            <TabTemplate>示例2</TabTemplate>
            <ChildContent>
            <DualAxes Data="@(new[] {uvBillData_2, transformData_2})" Config="config2" />
            </ChildContent>
        </TabPane>
    </Tabs>

@code{

    #region 示例1

    readonly object uvBillData = new object[]
    {
        new {time = "2019-03", value = 350, type = "uv"},
        new {time = "2019-04", value = 900, type = "uv"},
        new {time = "2019-05", value = 300, type = "uv"},
        new {time = "2019-06", value = 450, type = "uv"},
        new {time = "2019-07", value = 470, type = "uv"},
        new {time = "2019-03", value = 220, type = "bill"},
        new {time = "2019-04", value = 300, type = "bill"},
        new {time = "2019-05", value = 250, type = "bill"},
        new {time = "2019-06", value = 220, type = "bill"},
        new {time = "2019-07", value = 362, type = "bill"}
    };

    readonly object transformData = new object[]
    {
        new {time = "2019-03", count = 800},
        new {time = "2019-04", count = 600},
        new {time = "2019-05", count = 400},
        new {time = "2019-06", count = 380},
        new {time = "2019-07", count = 220}
    };

    readonly DualAxesConfig config1 = new DualAxesConfig
    {
        Title = new Title
        {
            Visible = true,
            Text = "分组柱+折线混合图",
            AlignTo = "middle"
        },
        Description = new Description
        {
            Visible = true,
            Text = "分组柱+折线混合图表",
            AlignTo = "middle"
        },
        XField = "time",
        YField = new[] {"value", "count"},
        GeometryOptions = new object[]
        {
            new
            {
                Geometry = "column",
                IsGroup = true,
                seriesField = "type"
            },
            new
            {
                Geometry = "line",
                LineStyle = new
                {
                    LineWidth = 2
                }
            },
        },
    };

    #endregion 示例1

    #region 示例2

    readonly object uvBillData_2 = new object[]
    {
        new {time = "2019-03", value = 350, type = "uv"},
        new {time = "2019-04", value = 900, type = "uv"},
        new {time = "2019-05", value = 300, type = "uv"},
        new {time = "2019-06", value = 450, type = "uv"},
        new {time = "2019-07", value = 470, type = "uv"},
        new {time = "2019-03", value = 220, type = "bill"},
        new {time = "2019-04", value = 300, type = "bill"},
        new {time = "2019-05", value = 250, type = "bill"},
        new {time = "2019-06", value = 220, type = "bill"},
        new {time = "2019-07", value = 362, type = "bill"}
    };

    readonly object transformData_2 = new object[]
    {
          new { time =  "2019-03", count =  800, name =  "a" },
          new { time =  "2019-04", count =  600, name =  "a" },
          new { time =  "2019-05", count =  400, name =  "a" },
          new { time =  "2019-06", count =  380, name =  "a" },
          new { time =  "2019-07", count =  220, name =  "a" },
          new { time =  "2019-03", count =  750, name =  "b" },
          new { time =  "2019-04", count =  650, name =  "b" },
          new { time =  "2019-05", count =  450, name =  "b" },
          new { time =  "2019-06", count =  400, name =  "b" },
          new { time =  "2019-07", count =  320, name =  "b" },
          new { time =  "2019-03", count =  900, name =  "c" },
          new { time =  "2019-04", count =  600, name =  "c" },
          new { time =  "2019-05", count =  450, name =  "c" },
          new { time =  "2019-06", count =  300, name =  "c" },
          new { time =  "2019-07", count =  200, name =  "c" },
    };

    readonly DualAxesConfig config2 = new DualAxesConfig
    {
        Title = new Title
        {
            Visible = true,
            Text = "分组柱+折线混合图",
            AlignTo = "middle"
        },
        Description = new Description
        {
            Visible = true,
            Text = "配置多折线",
            AlignTo = "middle"
        },
        XField = "time",
        YField = new[] { "value", "count" },
        GeometryOptions = new object[]
        {
            new
            {
                Geometry = "column",
                IsGroup = true,
                seriesField = "type"
            },
            new
            {
                Geometry = "line",
                LineStyle = new
                {
                    LineWidth = 2
                }
            },
        },
    };

    #endregion 示例2

}